<!-- eslint-disable vue/multi-word-component-names -->
<!-- 步骤表单录用 -->
<template>
  <div class='box'>
    <el-steps style="max-width: 80% ;margin: 0 auto;" :active="active" finish-status="finish">
      <el-step title="基本信息" />
      <el-step title="地址信息" />
      <el-step title="信息确认" />
      <el-step title="完成" />
    </el-steps>

    <!-- 第一页 -->
    <template v-if="active === 1">
      <el-form ref="ruleFormRef" style="max-width: 600px ; margin: 0 auto;" :model="ruleForm" status-icon :rules="rules"
        label-width="auto" class="demo-ruleForm">
        <el-form-item label="姓名" prop="name">
          <el-input v-model="ruleForm.name" type="text" autocomplete="off" />
        </el-form-item>

        <el-form-item label="性别" prop="sex">
          <el-select v-model="ruleForm.sex" clearable placeholder="请选择性别" style="width: 240px">
            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </el-form-item>

        <el-form-item label="生日" prop="birthday">

          <el-date-picker v-model="ruleForm.birthday" type="date" placeholder="Pick a day" />
        </el-form-item>

        <el-form-item label="身份" prop="identity">
          <el-radio-group v-model="ruleForm.identity" class="ml-4">
            <el-radio value="学生" size="large">学生</el-radio>
            <el-radio value="教师" size="large">教师</el-radio>
            <el-radio value="程序员" size="large">程序员</el-radio>
            <el-radio value="设计师" size="large">设计师</el-radio>
            <el-radio value="运营" size="large">运营</el-radio>
            <el-radio value="医生" size="large">医生</el-radio>
            <el-radio value="律师" size="large">律师</el-radio>
          </el-radio-group>
        </el-form-item>

        <el-form-item label="备注">
          <el-input v-model="ruleForm.remark" style="width: 240px" :rows="2" type="textarea" placeholder="请输入详细地址" />
        </el-form-item>


        <el-button @click="resetForm(ruleFormRef)">重置</el-button>
        <el-button type="primary" @click="submitForm(ruleFormRef)">下一步</el-button>

      </el-form>
    </template>


    <!-- 第二页 -->
    <template v-if="active === 2">
      <el-form ref="ruleFormRef2" style="max-width: 600px ; margin: 0 auto;" :model="ruleForm2" status-icon
        :rules="rules2" label-width="auto" class="demo-ruleForm">

        <el-form-item label="手机号码" prop="phone">
          <el-input v-model="ruleForm2.phone" type="text" autocomplete="off" style="width: 200px;" />
        </el-form-item>

        <el-form-item label="所在地区" prop="citys">
          <el-cascader v-model="ruleForm2.citys" :options="citys" />
        </el-form-item>

        <el-form-item label="详细地址" prop="address">
          <el-input v-model="ruleForm2.address" style="width: 240px" :rows="2" type="textarea" placeholder="请输入详细地址" />
        </el-form-item>


        <el-button @click="resetForm2(ruleFormRef2)">重置</el-button>
        <el-button type="primary" @click="submitForm2(ruleFormRef2)">下一步</el-button>
      </el-form>

    </template>

    <!-- 第三页 -->
    <template v-if="active === 3">
      <el-form ref="ruleFormRef3" style="max-width: 600px ; margin: 0 auto;" :model="ruleForm3" status-icon
        :rules="rules3" label-width="auto" class="demo-ruleForm">
        <el-form-item label="姓名" prop="name">
          <el-input v-model="ruleForm3.name" type="text" autocomplete="off" />
        </el-form-item>

        <el-form-item label="性别" prop="sex">
          <el-select v-model="ruleForm3.sex" clearable placeholder="请选择性别" style="width: 240px">
            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </el-form-item>

        <el-form-item label="生日" prop="birthday">

          <el-date-picker v-model="ruleForm3.birthday" type="date" placeholder="Pick a day" />
        </el-form-item>

        <el-form-item label="身份" prop="identity">
          <el-radio-group v-model="ruleForm3.identity" class="ml-4">
            <el-radio value="学生" size="large">学生</el-radio>
            <el-radio value="教师" size="large">教师</el-radio>
            <el-radio value="程序员" size="large">程序员</el-radio>
            <el-radio value="设计师" size="large">设计师</el-radio>
            <el-radio value="运营" size="large">运营</el-radio>
            <el-radio value="医生" size="large">医生</el-radio>
            <el-radio value="律师" size="large">律师</el-radio>
          </el-radio-group>
        </el-form-item>

        <el-form-item label="备注">
          <el-input v-model="ruleForm3.remark" style="width: 240px" :rows="2" type="textarea" placeholder="请输入详细地址" />
        </el-form-item>

        <el-form-item label="手机号码" prop="phone">
          <el-input v-model="ruleForm3.phone" type="text" autocomplete="off" style="width: 200px;" />
        </el-form-item>

        <el-form-item label="所在地区" prop="citys">
          <el-cascader v-model="ruleForm3.citys" :options="citys" />
        </el-form-item>

        <el-form-item label="详细地址" prop="address">
          <el-input v-model="ruleForm3.address" style="width: 240px" :rows="2" type="textarea" placeholder="请输入详细地址" />
        </el-form-item>

        <el-button @click="resetForm3(ruleFormRef3)">重置</el-button>
        <el-button type="primary" @click="submitForm3(ruleFormRef3)">确认信息</el-button>
      </el-form>

    </template>
    <!-- 第四页 -->
    <template v-if="active === 4">
      <div style="text-align: center;line-height: 30px; font-size: 20px; ">
        <h1>恭喜您，申请成功！</h1>
        <p>姓名 : {{ ruleForm3.name }}</p>
        <p>性别 : {{ ruleForm3.sex }}</p>
        <p>生日 : {{ new Date(ruleForm3.birthday).toLocaleDateString() }}</p>
        <p>身份 : {{ ruleForm3.identity }}</p>
        <p>备注 : {{ ruleForm3.remark }}</p>
        <p>手机号 : {{ ruleForm3.phone }}</p>
        <p>所在地区 : {{ cityss}}</p>
        <p>详细地址 : {{ ruleForm3.address }}</p>
        <el-button type="primary">查看用户</el-button>
      </div>

    </template>
  </div>
</template>

<script lang="ts" setup>
import { computed, reactive, ref, watch } from 'vue'
import type { FormInstance, FormRules } from 'element-plus'
import { citys } from './city'


const ruleFormRef = ref<FormInstance>()
const ruleFormRef2 = ref<FormInstance>()
const ruleFormRef3 = ref<FormInstance>()
const ruleForm = reactive({
  name: '',//姓名
  sex: '',//性别
  birthday: '',//备注
  identity: '',//身份
  remark: '',//备注

})
const ruleForm2 = reactive({
  phone: '',//手机号
  citys: '',//所在地区
  address: '',//详细地址
})

let ruleForm3 = {
  name: '',//姓名
  sex: '',//性别
  birthday: '',//备注
  identity: '',//身份
  remark: '',//备注
  phone: '',//手机号
  citys: '',//所在地区
  address: '',//详细地址
  citys1: '',//页面回显用到的地区
}



const options = [
  {
    value: '男',
    label: '男',
  },
  {
    value: '女',
    label: '女',
  }
]




// 姓名的验证
const validatename = (rule: any, value: any, callback: any) => {
  if (value === '') {
    callback(new Error('请输入姓名'))
  } else {
    callback()
  }
}
// 性别的验证
const validatesex = (rule: any, value: any, callback: any) => {
  if (value === '') {
    callback(new Error('请输入性别'))
  } else {
    callback()
  }
}
// 年龄的验证
const validateage = (rule: any, value: any, callback: any) => {
  if (value === '') {
    return callback(new Error('请选择年龄'))
  } else {
    callback()
  }
}
// 身份的验证
const validateidentity = (rule: any, value: any, callback: any) => {
  if (value === '') {
    return callback(new Error('请选择身份'))
  } else {
    callback()
  }
}
// 手机号的验证
const validatephone = (rule: any, value: any, callback: any) => {
  const phoneRegex = /^1[3456789]\d{9}$/;
  if (value === '') {
    callback(new Error('请输入手机号'));
  } else if (!phoneRegex.test(value)) {
    callback(new Error('手机号格式不正确'));
  } else {
    callback();
  }
}
// 城市的验证
const validatecitys = (rule: any, value: any, callback: any) => {
  if (value === '') {
    return callback(new Error('请选择城市'))
  } else {
    callback()
  }
}
// 地址的验证
const validateaddress = (rule: any, value: any, callback: any) => {
  if (value === '') {
    return callback(new Error('请输入地址'))
  } else {
    callback()
  }
}


const rules = reactive<FormRules<typeof ruleForm>>({
  name: [{ validator: validatename, trigger: 'blur' }],
  sex: [{ validator: validatesex, trigger: 'blur' }],
  birthday: [{ validator: validateage, trigger: 'blur' }],
  identity: [{ validator: validateidentity, trigger: 'blur' }],
})

const rules2 = reactive<FormRules<typeof ruleForm2>>({
  phone: [{ validator: validatephone, trigger: 'blur' }],
  citys: [{ validator: validatecitys, trigger: 'blur' }],
  address: [{ validator: validateaddress, trigger: 'blur' }],
})

const rules3 = reactive<FormRules<typeof ruleForm3>>({
  name: [{ validator: validatename, trigger: 'blur' }],
  sex: [{ validator: validatesex, trigger: 'blur' }],
  birthday: [{ validator: validateage, trigger: 'blur' }],
  identity: [{ validator: validateidentity, trigger: 'blur' }],
  phone: [{ validator: validatephone, trigger: 'blur' }],
  citys: [{ validator: validatecitys, trigger: 'blur' }],
  address: [{ validator: validateaddress, trigger: 'blur' }],
})

const active = ref(1)
// 第一个页面的下一步
const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate((valid) => {
    if (valid) {
      if (active.value++ > 3) active.value = 0
    } else {
      return false
    }
  })
}
// 第一个页面的重置
const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.resetFields()
}
// 第二个页面的下一步
const submitForm2 = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate((valid) => {
    if (valid) {
      ruleForm3 = reactive({
        ...ruleForm,
        ...ruleForm2,
      })
      if (active.value++ > 3) active.value = 0;
    } else {
      return false
    }
  })
}
// 第二个页面的重置
const resetForm2 = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.resetFields()
}

// 第三个页面中的确认信息
const submitForm3 = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate((valid) => {
    if (valid) {
      if (active.value++ > 3) active.value = 0;
    } else {
      return false
    }
  })
}
// 第三个页面中的重置
const resetForm3 = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.resetFields()
}

  const cityss = computed(()=>{
       citys.forEach((item: any) => {
      if (item.value === ruleForm3.citys[0]) {
        ruleForm3.citys1 = item.label + '省'
        item.children.forEach((item1: any) => {
          if (item1.value === ruleForm3.citys[1]) {
            ruleForm3.citys1 += item1.label + '市'
             item1.children.forEach((item2: any) => {
              if (item2.value === ruleForm3.citys[2]) {
                 ruleForm3.citys1 += item2.label + '区'
              }
            })
          }
        })
      }
    })
    return ruleForm3.citys1
  })

</script>


<style lang="scss" scoped>
.box-1 {
  display: flex;
  text-align: center;

  // width: 200px;
  li {
    margin-left: 250px;
  }
}

.box {
  background-color: #fff;
  padding: 30px;
  height: 80vh;
}

.box-2 {
  margin-top: 60px;
  margin-left: 500px;
}
</style>